<template>
  <div class="videoJs">
    <video
      id="roomVideo"
      class=""
      controls
      muted
      poster="//vjs.zencdn.net/v/oceans.png"
    >
      <source
        src="https://vip.ffzy-online2.com/20240216/48497_7124419f/2000k/hls/mixed.m3u8"
      />
    </video>
  </div>
</template>
<script setup lang="ts">
import videojs from 'video.js'
import Player from 'video.js/dist/types/player';
import { onMounted, onUnmounted, ref } from 'vue'
const player = ref<Player>()
onMounted(() => {
  player.value = videojs(
    'roomVideo',
    {
      bigPlayButton: true,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false,
      controlBar: false,
    },
    function () {
      /* this.on('error', (err) => {
        console.log('err', err)
      }) */
      // this.play()
    }
  )
  console.log('player obj', player.value);
  
  // player.value.play()
})
onUnmounted(() => {
  player.value = undefined
})
</script>
<style lang="scss" scoped>
.videoJs {
  width: 100%;
  height: 100%;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
